@import "@/styles/__index.less";

.security-left {
  position: relative;
  width: 375px;
  padding: 0px 15px;
  margin: 20px;
  background-color: rgba(0, 26, 40, 0.61);
  pointer-events: auto;
  display: flex;
  flex-direction: column;

  :deep(.group-title) {
    position: absolute;
    top: 0;
    left: 0;
  }

  .security-l1 {
    height: 320px;
    display: flex;
    flex-direction: column;

    .person-stat-box {
      flex: 1;
    }
  }

  .security-l2 {
    flex: 1;
    display: flex;
    flex-direction: column;

    .chart {
      flex: 1;
    }
  }

  .security-l3 {
    flex: 1;
    height: 0;
    display: flex;
    flex-direction: column;

    .timeline-box {
      flex: 1;
      height: 0;
      margin: 12px 0px;
      overflow-y: auto;
    }
  }
}

.security-middle {
  flex: 1;
  position: relative;
  margin-right: 415px;
  //margin-top: 20px;
  box-sizing: border-box;
  .middleInfo{
    z-index: 10;
    position: absolute;
    background: rgba(8, 22, 26, 1);
    bottom: 20px;
    left: 0;
    width: 100%;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    &.show{
      //transform: translate(100%,0);
      //margin: 20px 0;
      //height: 100%;
      height:  calc(100% - 40px);
      .middleList{
        height: calc(100% - 43px);
      }
    }
    .ejectBtn {
      position: absolute;
      z-index: 5;
      left: 50%;
      transform: translate(-50%,-100%);
      width: 80px;
      height: 18px;
      background-image: linear-gradient(to top, rgba(8, 22, 26), #478787);
      border-radius: 5px 5px 0 0;
      opacity: .8;

      &:hover {
        opacity: 1;
      }
    }
    .time{
      position: absolute;
      right: 100px;
      top: 7px;

        .ant-picker-range{
          background-color: transparent;
          color: white;
          border-color: #B7FFFF;
          border-radius: 8px;
        }
        :deep(.ant-picker-input) > input{
          color: white !important;
          &::placeholder{
            color: white !important;
          }
        }

        :deep(.ant-picker-range-separator),:deep(.ant-picker-suffix){
          svg{
            color: white !important;
          }
        }

    }
    .qie{
      font-weight: bold;
      filter: drop-shadow(0 0 1px #000);
      position: absolute;
      right: 60px;
      top: 14px;
      font-size: 16px;
      color: #5aa9a9;
    }
    .export{
      font-weight: bold;
      filter: drop-shadow(0 0 1px #000);
      position: absolute;
      right: 14px;
      top: 14px;
      font-size: 16px;
      color: #5aa9a9;
    }
    .title{
      width: 400px;
    }
    .middleList{
      width: 100%;
      height: 240px;
    }
  }

}

.security-right {
  position: absolute;
  height: cala(100% - 40px);
  box-sizing: border-box;
  right: 0;
  top: 0;
  bottom: 0;
  width: 375px;
  padding: 0px 15px;
  margin: 20px;
  background-color: rgba(0, 26, 40, 0.61);
  pointer-events: auto;
  display: flex;
  flex-direction: column;

  .security-r1 {
    flex: 6;
    height: 0;
    display: flex;
    flex-direction: column;

    .progress-box {
      flex: 1;
      padding-top: 6px;
      padding-bottom: 14px;
    }

  }

  &.show {
    transform: translate(100%, 0);
    margin: 20px 0;
  }

  .security-r2 {
    flex: 6;
    height: 0;
    display: flex;
    flex-direction: column;
    .chart{
      flex: 1;
    }
  }
  .security-r3 {
    flex: 6;
    height: 0;
    display: flex;
    flex-direction: column;

  }
}
